<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, watch } from "vue";
import { Toast } from 'vant';
import 'vant/es/toast/style';
import { storeToRefs } from "pinia";
import { userLocalStoriesStore } from "../../store";

const router = useRouter();
let radioBtn = ref<boolean>(false);

const userStore = userLocalStoriesStore();
const { isLogin } = storeToRefs(userStore);

watch(() => isLogin.value, () => {
    if (!isLogin.value) {
        radioBtn.value = false;
    }
})

function goToLoginSetting() {
    if (radioBtn.value) {
        router.push({
            name: 'login-setting'
        })
    }
    else {
        Toast({
            message: 'ONE：登录/注册前\n请先阅读并同意相关协议',
        });
    }
}

function changeRadio() {
    radioBtn.value = !radioBtn.value;
}

</script>

<template>
    <div class="w-screen h-screen bg-gray-100">
        <img class="h-2/4 w-screen" src="@/assets/login/indi_head_day.png" alt="img">

        <div class="mt-24">
            <img class="w-32 img-left mb-8" src="@/assets/login/sign_up.png" alt="img" @click="goToLoginSetting">
            <div class="text-center mb-5">还没有账号？点击注册</div>
            <form class="flex justify-center items-center text-gray-400">
                <input type="radio" class="mr-3" name="login" @click="changeRadio" :checked="radioBtn">
                <div>我已阅读并同意</div>
                <div class="text-black">《用户服务协议》</div>
                <div>和</div>
                <div class="text-black">《隐私政策》</div>
            </form>
        </div>
        <div>
            <div class="text-gray-400 text-center mt-20 mb-5">其他登录方式</div>
            <div class="flex justify-around">
                <img class="w-16 h-16 " src="@/assets/share/bubble_wechat.png" alt="img" />
                <img class="w-16 h-16 " src="@/assets/share/bubble_weibo.png" alt="img" />
                <img class="w-16 h-16 " src="@/assets/share/bubble_qq.png" alt="img" />
            </div>
        </div>
    </div>
</template>

